layui.use(['table', 'laydate', 'form', 'layer', 'jquery'], function () {
    let laydate = layui.laydate;
    $ = layui.jquery;
    let form = layui.form,
        layer = layui.layer;
    //执行一个laydate实例
    laydate.render({
        elem: '#birthday', //指定元素
        //    高度太低，需要强制弹出
        trigger: 'click'
    });
    findById();
    //根据id查询当前数据，并显示到页面
    function findById() {
        let id = sessionStorage.getItem("userId");
        $.ajax({
            url: '/back/user/findById',
            data: {id: id},
            type: 'get',
            dataType: 'json',
            success: function (res) {
                if (res.data != null) {
                    setPageData(res.data);
                }
            }
        })
    }

    //拿到后台数据并赋值给页面
    function setPageData(data) {
        console.log(data);
        // console.log("这是名字："+data.get(username));
        console.log("这是名字1："+data.username);
          form.val ('setData', {
               "username": data.username // "name": "value"
               // ,"password": data.password
               , "phone": data.phone
               , "email": data.email //复选框选中状态
               , "birthday": data.birthday //开关状态
               , "sex": data.sex
               , "enable": data.enable
        });
        // $("#username").val(data.username);
        // let hobbys = ["java", "c++", "c#"];
        // let hobby=data.hobby;
        if (data.hobby != null) {
            let hobbys = data.hobby.split(',');
            //爱好赋值思路：
            //     1.拿到Java后台的爱好，将爱好分解成数组
            //2.将页面上的爱好的复选框拿到，这里其实也是数组
            //3.将Java后台的数据和页面上爱好的数据进行对比，如果相同，则让改复选框选中
            $("input[type=checkbox][name=hobby]").each(function (index, data) {
                // console.log(index, data)
                // console.log(data.title)
                // hobbys.push(data.title);
                for (let i = 0; i < hobbys.length; i++) {
                    console.log(hobbys[i], data.title, hobbys[i] == data.title)
                    if (hobbys[i] == data.title) {
                        data.checked = true;
                    }
                    // if ($(this).title == hobbys[i]) {
                    //     // $(this).checked(true);
                    //     // $(this).attr("checked", "checked");
                    // }
                }
            })

        }
        form.render();
    }

    //如果没有，自定义验证，则有默认验证
    //自定义验证规则
    form.verify({
        //正则表达式
        // ^以什么开头 $以什么结尾
        // []只能取里面的一位元素
        // {m,n} 至少m个，最多n个元素
        username: [/^[A-z][A-z0-9_-]{5,11}$/, '用户名必须是6到12为，以字母开头'],
        password: [/(.+){6,12}$/, '密码必须6到12位'],
        phone: [/^1[38][0-9]{9}$/, '电话号码必须是13和18开头的手机号'],
        repass: function (value) {
            // 找到两个密码的值是否相等
            //$('#password') 根据id得到当前对象
            //$('#password').val() 取值
            //$('#password').val(11)赋值
            // val和html的区别？val 是用户输入框，html用于显示，就是div
            if ($('#password').val() != $('#L_repass').val()) {
                return '两次密码不一致';
            }
        }
    });
    //监听提交
    form.on('submit(edit)',
        function (data) {
            data = data.field;
            //{username:'aaa',password:'aaa'}
            //对爱好进行重写获取数据
            //因为爱好是复选框，可能有多个数据，所以得到的应该是数组
            // 那么怎么得到复选框，并遍历里面的数据，得到title里面的值
//            js 一般情况下拿到对象$("#id")
            let hobbys = [];
            $("input[type=checkbox][name=hobby]:checked").each(function (index, data) {
                // console.log(index, data)
                console.log(data.title)
                hobbys.push(data.title);
            })
            // console.log(hobbys);
            data.hobby = hobbys.toLocaleString();
            data.id = sessionStorage.getItem("userId");
            console.log(data);
            //发异步，把数据提交给java
            $.ajax({
                url: '/back/user/update',
                data: data,
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.count == 1) {
                        layer.alert("编辑成功", {
                                icon: 6
                            },
                            function () {
                                //关闭当前frame
                                xadmin.close();

                                // 可以对父窗口进行刷新
                                xadmin.father_reload();
                            });
                    } else {
                        layer.alert("编辑失败");
                    }

                }
            })
            return false;
        });
});